<template>
	<div class="affiche" :style="compStyle">
		<i class="iconfont icon-laba" :style="{color: color}"></i>
		<div class="text-container text-swiper" ref="textContainer">
			<div class="text-wrapper" ref="textWrapper">
				<div 
					class="text"
					:style="textItemStyle" 
					v-for="(item, index) in textList" 
					:key="index">
					<span>{{item.NOTICE_TEXT}}</span>
				</div>
			</div> 
			<div class="text-duplicate" ref="textDuplicate" :style="textDuplicateStyle">
				<div class="text" 
					:style="{
						height: `${height}px`,
						color: color,
						lineHeight: `${height}px`,
						transition: cpuTransition
					}">
					<span>{{textList[0].NOTICE_TEXT}}</span>
				</div>
			</div>	
		</div> 
	</div>
</template>

<script>
	const wulinBg = require('assets/images/team/wulin/notifications.jpg')
  export default {
		name: 'affiche',
    data () {
			return {
				idx: 0
			}
		},
		props: {
			height: {
				default: '31'
			},
			textList: {
				type: Array,
				default: []
			},
			bgColor: {
				type: String,
				default: '#d04519'
			},
			color: {
				type: String,
				default: '#fffbbc'
			},
			special: {
				type: Boolean,
				default: false
			},
			interval: {
				default: 3000
			},
			speed: {
				default: 3
			},
			direction: {
				type: String,
				default: 'horizonal'     //  horizonal : vertical
			}
		},
		computed: {
			cpuTransition () {
				return this.direction === 'horizonal' ? `transform ${this.speed}s linear` : `transform ${this.speed}s cubic-bezier(.17,.67,.41,1.03)`
			},
			textItemStyle () {
				return this.direction === 'horizonal' ? {display: 'inline-block', transition: 'none'} : {width: '100%', height: `${this.height}px`, color: this.color, transition: this.cpuTransition}
			},
			textDuplicateStyle () {
				return this.direction === 'horizonal' ? {top: '0'} : {top: `${height}px`}
			},
			compStyle () {
				return {
					height: `${this.height}px`,
					backgroundColor: this.bgColor,
					lineHeight: `${this.height}px`,
					backgroundImage: this.special ? `url(${wulinBg})` : 'none'
				}
			}
		},
		created () {
		},
		destroyed() {
			clearInterval(this.scrollInterval)
		},
		mounted () {
			this.init()
			this.loop()
		},
		methods: {
			init () {
				this.itemArr = this.$refs.textWrapper.querySelectorAll('.text')
				if(this.direction === 'vertical') {
					this.itemDul = this.$refs.textDuplicate.querySelector('.text')
				}
				this.scrollH = window.getComputedStyle(document.querySelector('.text'), null).height.replace('px', '')
				if(this.direction === 'horizonal') {
					this.containerWid = window.getComputedStyle(this.$refs.textContainer, null).width.replace('px', '')
					// for(let i = 0; i < this.itemArr.length; i++) {
					// 	this.itemArr[i].style.width = this.containerWid + 'px'
					// }
					this.wrapperWid = this.containerWid * (this.itemArr.length)
					this.$refs.textWrapper.style.width = Math.ceil(this.wrapperWid * 2) + 'px'
					this.$refs.textWrapper.style.height = '100%'
					this.$refs.textWrapper.style.paddingLeft = '100%'
					this.$refs.textDuplicate.style.left = this.containerWid + 'px'
				}
			},
			scrollVert (step) {
				return new Promise((resolve, reject) => {
					for(let i = 0; i < this.itemArr.length; i++) {
						this.setTransform(this.itemArr[i], 0, this.scrollH * (- step), 0)
					}
					setTimeout(() => {
						resolve(true)
					}, this.interval)
				})
			},
			scrollHori (step) {
				for(let i = 0; i < this.itemArr.length; i++) {
					this.itemArr[i].style.transform = `translate3d(${-step}%, 0, 0)`
				}
			},
			loop () {
				if(this.direction === 'horizonal') {
					let step = 0
					this.scrollInterval = setInterval(() => {
						step += this.speed / 10
						this.scrollHori(step)
						if(step > 100 * (this.textList.length + 1)) {
							step = 0
						}
					}, 20)
				} else {
					this.scrollInterval = setInterval(() => {
						this.idx ++
						if(this.idx !== this.textList.length) {
							this.scrollVert(this.idx)
						} else {
							this.setTransform(this.itemDul, 0, -this.scrollH, 0)
							this.scrollVert(this.idx).then(() => {
								this.initScroll()
								setTimeout(() => {
									this.setTransition(this.itemDul)
									for(let i = 0; i < this.itemArr.length; i++) {
										this.setTransition(this.itemArr[i])
									}
									this.scrollVert(1)
								},30)
							})
						}
					}, this.interval)
				}
			},
			initScroll () {
				this.idx = 1
				if(this.itemDul) {
					this.initTransiton(this.itemDul)
					this.initTransform(this.itemDul)
				}
				for(let i = 0; i < this.itemArr.length; i++) {
					this.initTransiton(this.itemArr[i])
				}
				this.scrollVert(0)
			},
			initTransiton (dom) {
				dom.style.transition = 'none'
			},
			initTransform (dom) {
				dom.style.transform = `none`
			},
			setTransition (dom) {
				dom.style.transition = this.cpuTransition
			},
			setTransform (dom, x, y, z, lag) {
				return new Promise((resolve, reject) => {
					dom.style.transform = `translate3d(${x}px, ${y}px, ${z}px)`
				})
				setTimeout(() => {
					resolve(true)
				}, lag)
			}
		}
  }
</script>

<style lang="less" scoped>
@import '../../../assets/less/icon.less';

* {
	box-sizing: border-box;
}

.ellipsis {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.paddingLR {
  padding-left: 5%;
  padding-right: 5%;
}

.affiche {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	background-color: #d04519;
	background-size: cover;
	overflow: hidden;
	.paddingLR;
	.icon-laba {
		color: #fffbbc;
		font-size: 19px;
	}
	.text-container {
		position: relative;
		margin-left: 5px;
		width: 90%;
		color: #fffbbc;
		height: 100%;
		overflow: hidden;
	}
	.text-duplicate {
		width: 81%;
		position: absolute;
	}
	.text {
		// width: 100%;
		// transition: transform 1s cubic-bezier(.17,.67,.52,.97);
		display: flex;
		align-items: center;
		span {
			.ellipsis;
		}
	}
}
</style>